<template>
  <div>
    <!--    查询功能-->
    <div style="margin-bottom: 5px">
      <!--      重置按钮-->
      <el-button type="success" @click="resetParam">重置</el-button>
      <!--      新增按钮-->
      <el-button type="primary" style="margin-left: 5px" @click="add"
        >新增</el-button
      >
    </div>
    <!--    列表展示-->
    <el-table
      :data="records"
      :header-cell-style="{ background: '#D3D3D3FF', color: '#555555' }"
    >
      <el-table-column prop="id" label="id" width="160"> </el-table-column>
      <el-table-column label="图片" width="300" header-align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 300px; height: 100px"
            :src="scope.row.image"
            fit="contain"
            :preview-src-list="[scope.row.image]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100">
      </el-table-column>
      <el-table-column prop="title" label="职称" width="100">
      </el-table-column>
      <el-table-column prop="description" label="个人描述" width="140"></el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="140">
      </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间" width="140">
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="100">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="del(scope.row.id)"
            style="margin-left: 5px"
          >
            <el-button slot="reference" size="small" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页  -->
    <pagination style="text-align: right;" v-show="total > 0" :pageSizes="[5, 10, 20, 30]" :total="total"
            :page.sync="page" :limit.sync="limit" @pagination="getList" />

    <el-dialog
      title="老师管理信息"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      :before-close="handleClose"
    >
      <!--      老师管理信息表单-->
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="图片" prop="id">
          <el-upload
          class="avatar-uploader"
          :action="actionUrl"
          :show-file-list="false" 
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload" 
          name="file"
          :data="uploadData"
          :headers="headers">
          <img v-if="form.image" :src="form.image" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件
            </div>
        </el-upload>
        </el-form-item>
      <el-form-item label="姓名" prop="name">
          <el-col :span="15">
            <el-input v-model="form.name" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-col :span="15">
            <el-input v-model="form.title"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="个人描述" prop="description">
          <el-col :span="15">
            <el-input type="textarea" v-model="form.description"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-radio-group v-model="form.sort">
            <el-input-number
              v-model="form.sort"
              controls-position="right"
              :min="0"
            ></el-input-number>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {  del } from "@/api/cmsService/teacherManagement/del";
import { queryAll } from "@/api/cmsService/teacherManagement/queryAll";
import {addOrUpdateTeacher } from "@/api/cmsService/teacherManagement/addOrUpdateTeacher";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "teacherManagement",
  data() {
    return {
      actionUrl:"http://106.52.100.34:8222/minioservice/minio-upload/upload",// 服务器上传API地址
      records: [],
      url: "",
      page: 1,
      limit: 5,
      total: 0,
      num: 1,
      centerDialogVisible: false,
      rules: {},
      form: {
        id:"",
        image: "",
        name:"",
        title:"",
        description:"",
        gmtCreate:"",
        gmtModified:"",
        sort:"",
        clubId:"",
      },
      uploadData: {
        bucketName: 'teacher' // 上传头像时的附加参数
      },
      headers: {},
    };
  },
  methods: {
      // 从 cookie 中获取 token
    getTokenFromCookie() {
      const cookies = document.cookie.split('; ');
      const token = cookies.find(row => row.startsWith('token='))?.split('=')[1];
      console.log(token);
      
      return token;
    },
    // 设置 headers
    setHeaders() {
      this.headers = {
        'token': this.getTokenFromCookie()
      };
    },
    //判断上传的是否为jpg、png格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 格式 或者是 PNG 格式!");
      }
    },
    handleAvatarSuccess(res){
      if (res.success) {
        this.form.image = res.data.url
      } else {
        this.$message.error('上传失败');
      } 
    },
    //重置表单
    resetForm() {
      this.$refs.form.resetFields();
      this.form = {
        id:"",
        image: "",
        name:"",
        title:"",
        description:"",
        gmtCreate:"",
        gmtModified:"",
        sort:"",
        clubId:"",
      }
    },

    //新增按钮
    add() {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    //修改
    mod(row) {
      this.centerDialogVisible = true;
      this.$nextTick(() => {
        //赋值到表单
        this.id = row.id;
        this.form.id = row.id;
        this.form.image = row.image;
        this.form.name = row.name;
        this.form.title = row.title;
        this.form.clubId = row.clubId;
        this.form.description = row.description;
        this.for.sort = row.sort;
      });
    },
    //删除
    del(id) {
      del(id).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
        } else {
          this.$message({
            message: "删除失败",
            type: "error",
          });
        }
      });
    },
    //修改
    doMod( ) {
      addOrUpdateTeacher(this.form).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
          this.resetForm();
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
          
        }
      });
    },
    //提交数据到后台
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.id) {
            //如果有id则修改
            this.doMod();
          } else {
            //否则增加
            this.doSave();
          }
        } else {
          this.$message({
            message: "操作失败",
            type: "error",
          });
          return false;
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    resetParam() {
      this.loadPost();
    },
    loadPost() {
      queryAll(this.page, this.limit).then((res) => {
        if (res.code === 20000) {
          this.records = res.data.list.records;
          this.total = res.data.list.total;
        }
      });
    },
    getList(e) {
            this.page= e.page
            this.limit = e.limit
            this.loadPost()
        },
    doSave() {
      addOrUpdateTeacher(this.form).then((res) => {
        if (res.code === 20000) {
          this.$message({
            message: "增加成功",
            type: "success",
          });
          this.centerDialogVisible = false;
          this.loadPost();
          this.resetForm();
        } else {
          this.$message({
            message: "增加失败",
            type: "error",
          });
          console.log(res);
          
        }
      });
    },
  },
  beforeMount() {
    this.loadPost();
    this.setHeaders(); 
  },
};
</script>

<style scoped>
.pagination-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-uploader .avatar {
  width: 300px;
  height: 100px;
  display: block;
}
.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.rotating{
position: absolute;
width: 585px;
height: 100%;
right: 0;
top: 0;
}
</style>
